<link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/mmv-ui/mmv-peer-component.css">
<!-- 用法 -->
<!-- <div id="rrapp" v-cloak> -->
<!-- <mmv-peer-component :peerdata="peerdata"></mmv-peer-component> -->
<!-- </div> -->

<script type="text/x-template" id="mmv-peer-component">
    <div id="mmv-peer-component_namespace">
        <div class="peer-component">
            <div class="app-header">
            <el-image
                :src="coverImgFilter(peerdata.detailImage, 'detailImage')"
                fit="contain"
                class="bar"
            ></el-image>
            <div class="card">
                <div class="left">
                <p class="title">{{ peerdata.peerTitle | appData('peerTitle') }}</p>
                <div class="time">
                    <el-image :src="time" fit="cover" class="time-bg"></el-image>
                    <div class="text">
                    活动时间 : {{ peerdata.timeStart | appData_time('timeStart') }}
                    至
                    {{ peerdata.timeEnd | appData_time('timeEnd') }}
                    </div>
                </div>
                </div>
                <div class="right">
                <el-image :src="card_right" fit="cover" class="card-right"></el-image>
                <div class="content">
                    <p class="last-name">距报名结束仅剩</p>
                    <div class="last-time">
                    <span>1天</span>
                    <span class="last-time-item">09</span>
                    <span>:</span>
                    <span class="last-time-item">04</span>
                    <span>:</span>
                    <span class="last-time-item">59</span>
                    </div>
                </div>
                </div>
            </div>
            </div>
            <div class="app-content">
            <div class="active">
                <div class="app-content-title">活动奖品</div>
                <ul class="prize_card">
                <li
                    :class="{
                    prize_list_item: true,
                    clear_margin: (index + 1) % 3 === 0,
                    }"
                    v-for="(item, index) in peerdata.activitySeckillList"
                    :key="index"
                >
                    <el-image :src="prize" fit="cover" class="item-img"></el-image>
                    <p class="item-img-text">{{ item.peerNumber }}人组队成功</p>
                    <el-image
                    v-if="item.peerUrl != '' && !item.peerUrl"
                    :src="getImgUrl(item.peerUrl)"
                    fit="scale-down"
                    class="prize_bg"
                    ></el-image>
                    <div v-else class="prize_bg">
                    <el-image :src="yhqImg" fit="scale-down"></el-image>
                    <!-- <span class="name">{{ item.peerName }}</span> -->
                    </div>
                    <div class="prize_name">
                    <p>{{ item.peerName }}</p>
                    <p>X {{ item.peerStock }}</p>
                    </div>
                </li>
                </ul>
            </div>
            <div class="grounp">
                <div class="app-content-title">组队成员</div>
                <div class="active_card">
                <el-image :src="active" fit="cover" class="item-img"></el-image>
                <p class="item-img-text">五人团 *还差 2 人获得飞利浦剃须刀</p>
                <ul class="active_card_content">
                    <li
                    :class="{
                        active_list_item: true,
                        clear_margin: (index + 1) % 5 === 0,
                    }"
                    v-for="(item, index) in prizList"
                    :key="index"
                    >
                    <el-image
                        :src="item.url"
                        fit="cover"
                        class="active-item-img"
                    ></el-image>
                    </li>
                </ul>
                </div>
            </div>
            <div class="prize">
                <div class="app-content-title">获得奖品</div>
                <div class="prize-content">
                <el-image :src="kong" fit="cover" class="prize-item-img"></el-image>
                <span>暂无奖品</span>
                </div>
            </div>
            <div class="address">
                <div class="app-content-title">活动地点</div>
                <div
                class="address-content"
                v-for="(item, index) in peerdata.activityUnit"
                :key="index"
                >
                <p class="name">{{ item.applicableUnit }}</p>
                <p class="address">{{ item.unitAddress }}</p>
                <el-row type="flex" class="row-bg" justify="space-between">
                    <el-col :span="6" class="commodity-list">
                    <p class="commodity-list-item-1">1.15km</p>
                    <p class="commodity-list-item-2">距离</p>
                    </el-col>
                    <el-col :span="6">
                    <p class="commodity-list-item-1">
                        {{ item.serviceConsultant }}人
                    </p>
                    <p class="commodity-list-item-2">服务顾问</p>
                    </el-col>
                    <el-col :span="6" class="vertical-center">
                    <el-image
                        :src="phone"
                        fit="cover"
                        class="vertical-center-item-1"
                    ></el-image>
                    <el-image
                        :src="address"
                        fit="cover"
                        class="vertical-center-item-2"
                    ></el-image>
                    </el-col>
                </el-row>
                </div>
            </div>
            <div class="introduce">
                <div class="app-content-title">活动介绍</div>
                <div v-html="peerdata.peerContent" class="card_introduce"></div>
            </div>
            </div>
        </div>
    </div>
</script>
<!-- 加载js文件-->
<!-- 引入element-ui -->
<script src="${request.contextPath}/statics/js/element-ui/index.min.js"></script>
<script>
    $(function () {
        function MmvFilterUrl(url) {
            return importURL + url;
        }
        let defaultData = {
            peerTitle: '一键加油 | 立减20元',
            timeStart: '2021-12-31',
            timeEnd: '2022-12-31',
            inventedEnrollNumber: 100,
            activeAddress: '深圳汇天源科技园店',
            coverImage: '${request.contextPath}/statics/images/mmv-ui/peer/header.png',
            detailImage: '${request.contextPath}/statics/images/mmv-ui/peer/header.png',
            activityUnit: [],
        }
        Vue.component("mmv-peer-component", {
            template: "#mmv-peer-component",
            filters: {
                appData(val, key) {
                    if (val && val != '') {
                        return val
                    } else {
                        return defaultData[key]
                    }
                },
                appData_time(val, key) {
                    if (val && val != '') {
                        let date = new Date(val)
                        let year = date.getFullYear() // 获取当前年份(2位)
                        let month = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
                        let day = date.getDate() // 获取当前日(1-31)
                        //修改月份格式
                        if (month >= 1 && month <= 9) {
                            month = '0' + month
                        }
                        //修改日期格式
                        if (day >= 0 && day <= 9) {
                            day = '0' + day
                        }
                        return year + '-' + month + '-' + day
                    } else {
                        return defaultData[key]
                    }
                },
            },
            props: {
                peerdata: {
                    type: Object,
                    default() {
                        return {
                            peerTitle: '活动名称', // 活动名称
                            timeStart: '', // 活动开始时间
                            timeEnd: '', // 活动结束时间
                            inventedJoinNumber: null, // 虚拟报名人数量
                            detailImage: '', // 活动上方的头图
                            peerContent: '', // 活动介绍
                            // 添加同行活动商品
                            activitySeckillList: [
                                {
                                    peerNumber: 0, // 组队人数
                                    peerUrl: '', // 奖品封面
                                    peerName: '奖品名称', // 奖品名称
                                    peerStock: 0,  // 奖品数量
                                },
                            ],
                            // 活动地址
                            activityUnit: [
                                {
                                    // applicableUnit: '地点名称', // 地点名称
                                    // unitAddress: '详细地址', // 详细地址
                                    serviceConsultant: 0, // 服务顾问人数
                                    "applicableUnitNo": "b163e907c9bf4d21b07106ee3293cd4d",
                                    "applicableUnit": "西安小寨店",
                                    "unitPhone": "13571744789",
                                    "unitLon": 108.959338,
                                    "unitLat": 34.260003,
                                    "unitAddress": "陕西省西安市碑林区咸宁学巷36号"
                                },
                            ],
                        };
                    },
                },
            },
            data() {
                return {
                    header: '${request.contextPath}/statics/images/mmv-ui/peer/header.png',
                    bar: '${request.contextPath}/statics/images/mmv-ui/peer/bar.png',
                    time: '${request.contextPath}/statics/images/mmv-ui/peer/time.png',
                    card_right: '${request.contextPath}/statics/images/mmv-ui/peer/card_right.png',
                    prize: '${request.contextPath}/statics/images/mmv-ui/peer/prize.png',
                    prize_bg: '${request.contextPath}/statics/images/mmv-ui/peer/prize_bg.png',
                    active: '${request.contextPath}/statics/images/mmv-ui/peer/active.png',
                    av: '${request.contextPath}/statics/images/mmv-ui/peer/av.png',
                    add: '${request.contextPath}/statics/images/mmv-ui/peer/add.png',
                    kong: '${request.contextPath}/statics/images/mmv-ui/peer/kong.png',
                    address: '${request.contextPath}/statics/images/mmv-ui/peer/address.png',
                    phone: '${request.contextPath}/statics/images/mmv-ui/peer/phone.png',
                    detailImg: '${request.contextPath}/statics/images/mmv-ui/peer/header.png',
                    yhqImg: '${request.contextPath}/statics/images/mmv-ui/img/vip.png',
                    prizList: [
                        { url: '${request.contextPath}/statics/images/mmv-ui/peer/av.png' },
                        { url: '${request.contextPath}/statics/images/mmv-ui/peer/add.png' },
                    ],
                }
            },
            mounted() {
                console.log('同行组件渲染成功！')
            },
            methods: {
                getImgUrl: MmvFilterUrl,
                coverImgFilter(val, key) {
                    if (val && val != '') {
                        return this.getImgUrl(val)
                    } else {
                        return defaultData[key]
                    }
                },
            },
        })
    })
</script>